<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="415" height="auto" :left="10" :top="60">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="mordelser-panel">
                <MainMenuList :menuList="modelserMenuList" @clickComponent="addComponent" :isDisabled="isDisabled" />
            </div>
            <!-- scenetree -->
            <div class="mordelser-scenetree" @click="whiteSpaceClick">
                <div class="tree-content">
                    <SceneTree :sceneTreeWrapper="modelserSceneTreeWrapper"></SceneTree>
                </div>
                <div class="submit">
                    <el-button @click.stop="submit"> 提交</el-button>
                </div>
            </div>
            <!-- 基础信息 -->
            <div class="mordelser-info">
                <BaseInfo />
            </div>
        </div>
    </Dialog>

    <component v-for="item in menuListRef" :key="item.id" :is="item.com" :comInfo="item" @cancel="removeComponent">
    </component>

    <!-- 自由绘制 编辑窗口 -->
    <FreeDrawingPropPanel v-if="modelserPropSceneTree && modelserPropSceneTree.propType == 'freeDrawing'"
        :title="modelserPropSceneTree ? modelserPropSceneTree.sceneObject.name : '编辑面板'" :sceneObject="modelserPropSceneTree.sceneObject"
        @cancel="objm.modelserPropSceneTree = undefined" :createOrEdit="modelserPropSceneTree.createOrEdit"> </FreeDrawingPropPanel>

    <!-- 圆形绘制 编辑窗口 -->
    <CircleDrawingPropPanel v-if="modelserPropSceneTree && modelserPropSceneTree.propType == 'circleDrawing'"
        :title="modelserPropSceneTree ? modelserPropSceneTree.sceneObject.name : '编辑面板'" :sceneObject="modelserPropSceneTree.sceneObject"
        @cancel="objm.modelserPropSceneTree = undefined" :createOrEdit="modelserPropSceneTree.createOrEdit"> </CircleDrawingPropPanel>

    <!-- 折线绘制 编辑窗口 -->
    <LineDrawingPropPanel v-if="modelserPropSceneTree && modelserPropSceneTree.propType == 'lineDrawing'"
        :title="modelserPropSceneTree ? modelserPropSceneTree.sceneObject.name : '编辑面板'" :sceneObject="modelserPropSceneTree.sceneObject"
        @cancel="objm.modelserPropSceneTree = undefined" :createOrEdit="modelserPropSceneTree.createOrEdit"> </LineDrawingPropPanel>

    <!-- 拦截网绘制 编辑窗口 -->
    <OverheadLinesDrawingPropPanel v-if="modelserPropSceneTree && modelserPropSceneTree.propType == 'overheadLinesDrawing'"
        :title="modelserPropSceneTree ? modelserPropSceneTree.sceneObject.name : '编辑面板'" :sceneObject="modelserPropSceneTree.sceneObject"
        @cancel="objm.modelserPropSceneTree = undefined" :createOrEdit="modelserPropSceneTree.createOrEdit">
    </OverheadLinesDrawingPropPanel>

    <TooltipCom v-if="currentDialog == 'submit'" :content="'点击提交之后，会将所有正在编辑的对象提交到服务端处理，请稍等。'" :title="'提交'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="submitConfirm" />

</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { MenuItem } from "@/scripts/dataTypes";
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import MainMenuList from "@/components/common/MainMenuList.vue";
import { modelserMenuList } from "@/scripts/menu/modelser/modelserMenuList";
import TooltipCom from "@/components/common/TooltipCom.vue";
import SceneTree from "@/components/sceneTree/SceneTree.vue";
import BaseInfo from "./BaseInfo.vue";
import FreeDrawingPropPanel from "@/components/propPanel/modelser/FreeDrawingPropPanel.vue";
import CircleDrawingPropPanel from "@/components/propPanel/modelser/CircleDrawingPropPanel.vue";
import LineDrawingPropPanel from "@/components/propPanel/modelser/LineDrawingPropPanel.vue";
import OverheadLinesDrawingPropPanel from "@/components/propPanel/modelser/OverheadLinesDrawingPropPanel.vue";
import { ElMessage } from "element-plus";

const props = withDefaults(defineProps<{ comInfo: MenuItem }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};

const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const modelserSceneTreeWrapper = objm.modelserSceneTreeWrapper
const modelserManager = objm.modelserManager;

const menuListRef = ref<any[]>([]);

// 是不是modelser服务
const isModelserServiceRef = toVR<string>(d, [modelserManager, "isModelserService",]);

const isDisabled = computed(() => {
    // 是EarthDS服务
    if (isModelserServiceRef.value) {
        return false;
    }
    // 不是EarthDS服务
    else {
        return true;
    }
});

// 选中的模式
const isHighlightRef = toVR<string>(d, [modelserManager, "isHighlight"])
const modelserPropSceneTree = toVR<any>(d, [objm, "modelserPropSceneTree"])


// 添加组件
const addComponent = async (item: any) => {
    if (item.id == "location") {
        modelserManager.eS3DTileset.flyTo();
        return;
    }
    if (item.id == "refresh") {
        modelserManager.refresh();
        return;
    }
    item.status != "active" ? item.status = "active" : item.status = "none";
    if (item.status == "active") {
        modelserPropSceneTree.value = undefined;
        if (!item.isOnly) {
            menuListRef.value = [...menuListRef.value, item];
        } else {
            menuListRef.value = [...menuListRef.value.filter((i) => !i.isOnly), item]
        }
    }
    else {
        removeComponent(item.id)
    }
};

// 删除组件
const removeComponent = (id: string) => {
    menuListRef.value = menuListRef.value.filter((i) => i.id !== id);
    const item = modelserMenuList.value.find((i: any) => i.id === id) as any;
    item.status = "none"
};

watch(modelserPropSceneTree, () => {
    if (!modelserPropSceneTree.value) return;
    removeComponent(modelserPropSceneTree.value.propType)
})

// 点击空白
const whiteSpaceClick = () => {
    console.log("点击空白");
    modelserSceneTreeWrapper?.sceneUiTree.clearAllSelectedItems()
    objm.propUiTreeManager.sceneObject = undefined;
}



// 数据地址
const modelserIdRef = toVR<string>(d, [modelserManager, "modelserId"]);

const currentDialog = ref<undefined | string>(undefined);

// 提交
const submit = async () => {
    const c = modelserSceneTreeWrapper?.json.root.children
    if (c && c.length > 0) {
        currentDialog.value = "submit"
    } else {
        ElMessage({
            message: "没有待提交的对象",
            type: "warning",
        })
    }
}

// 提交 确定按钮
const submitConfirm = async () => {
    // 提交任务
    await modelserManager.submit()
    currentDialog.value = undefined
}

d.dispose(modelserManager.clearModelserWindowEvent.disposableOn(() => {
    menuListRef.value = []
    modelserMenuList.value.map((i: any) => i.status = "none")
}))
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    /* padding: 15px; */
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.mordelser-panel {
    width: 100%;
}

.mordelser-scenetree {
    height: 320px;
    width: 100%;
    /* background-color: pink; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    border-bottom: 2px solid #EEEEEE;
}

.tree-content {
    width: 100%;
    height: 270px;
}

.submit {
    margin-right: 10px;
    margin-bottom: 10px;
}

.mordelser-info {
    width: calc(100% - 40px);
    height: calc(100% - 380px);

}
</style>